Composition Analysis

I analyzed BBC News. The website focus on clarity and professionalism over particularly interesting design, which makes sense for a well-respected news site. The layout is very orderly and grid-based and all text is left-aligned.

.

Contrast is used but fairly subtly, such as lines dividing sections and red used in place of black to emphasis text. Larger size and extra white space is used to emphasize a specific article.



Repetition is used a lot, lending a sense of unity and clarity. There’s not much of visual interest going on design-wise, but the attention is drawn to the images and video thumbnails that accompany the article headings, so it doesn’t seem particularly boring. Proximity is used to group stories within the same category and use of whitespace/margins allow for ease of reading.



The focus and priority is on the stories and drawing the reader in via images and headlines and conveys values like professionalism, traditionalism, and clarity. BBC News’ website is comparable to other news websites, especially NBC and AP News and is more organized and clear (in my opinion) that those of sites like CNN, Reuters, and Fox News. I think part of that might be that BBC tends to have a single section that spans the width of the page, while sites like Reuters have multiple columns going on.



I think one of the elements that makes BBC News feel more professional and trustworthy to me is the bottom of the home page. Many other reputable news sites have sponsored content at the bottom, not just standard ads but ones that are formatted in the clickbait style. However, BBC News does not have a section like this. Since I tend to associate the aforementioned ad style with clickbait, computer viruses, and tabloids, the absence of this sections makes BBC News feel more trustworthy and professional to me.



As we will discuss further in the next section, the font choice for BBC News was specifically developed for clarity and accessibility, so it conveys both those values.

BBC’s overall mission statement (not just the news branch) is “to act in the public interest, serving all audiences through the provision of impartial, high-quality and distinctive output and services which inform, educate and entertain.” We can see this focus on impartiality in the website design, especially when comparing BBC News’ clean, professional, but perhaps not very exciting design (as seen in the previous images) with Fox News’ use of emphasis text like “DOXXING QUEEN” and splitting your attention across multiple panels (and having videos running instead of all thumbnails).



From this, we might think that BBC News’ values lie more in the aforementioned professionalism, clarity, and impartiality, while perhaps Fox News’ lean more towards passion, boldness, and decisiveness.

Accessibility Analysis

BBC News does a pretty good job with accessibility overall and in comparison to other news sites. One particularly thoughtful and interesting element is the font used throughout. BBC uses a font they developed called BBC Reith Sans, which was developed in consultation with a neuroscientist and readability tested on user groups composed of people with dyslexia, moderate to severe vision impairment, and people who didn’t fall into either of the aforementioned categories Source.

In the screen capture video below, we can see that we can navigate well with tab, shift + tab, and enter, including when we have the window minimized. The page also has a way to skip to the main content instead of going through all the options (labelled as “skip to main content” in the beginning of the video). The order in which the tabs are highlighted is intuitive and the highlighting is clear.



Here, we see that the tab highlights are also clear while in high contrast mode and we also show the use of the skip to main content feature. Background color, margins, and such all look good in high contrast mode.



The main accessibility issue I ran into was that some videos (with no clear pattern as to which) lacked captions. Some videos have an option for captions and those captions are automatically turned on, while others do not have a caption option or built in. Note the presence and absence of captions on screen and of the caption option in the bottom right toolbar in the screenshots below.



I was also unable to find a transcript option for the videos. As can be seen in the photos above, each video comes with a short written description, but it does not have very much detail and is certainly not comparable to a transcript.

When we turn off the images, the site is not particularly attractive, but it still makes sense. As can be seen in the images below, each photo or video thumbnail is replaced by short text describing the photo or video that would have been there.





We can also see (although it doesn’t fully show in a video) that clicking anywhere on the search text or symbol automatically places the cursor inside the search box so we can immediately start typing.



Turning of CSS style doesn’t seem to take away any crucial content, but some of the stylistic/contrast features (like the triangles pointing to certain headlines) get huge and make the page difficult to read. It also makes some screenreaders skip some content, as can be seen in the video below.



I tried to run some of the screenreader tests like in the youtube video from the lecture 6 readings, but all the free ones I could get only read top to bottom, left to right, without grabbing and focusing on certain sections.

To try and take a look at possible issue that screenreader users could run into without having access to a quality screenreader, I ran the website through the AudioEye, WAVE, axe, and HTML_CodeSniffer tests from accessibilitytest.org. It performed the deep site scan and found the following issues:

Full results can be found here.

While AP News gets a higher accessibility score from accessibilitytest.org, it flags many more issues. I tried to look into the methodology, but ironically the “How It Works” page was not working, so I’m not sure what’s going on here. BBC News outperforms Fox, Reuters, and CNN. NBC has both a higher accessibility score and only a few issues flagged by each tests, so they likely do a better job with accessibility at least for contrast and screenreaders. However, NBC has other issues like background color and margins issues in high contrast mode (see image on left) and less clear highlighting when navigating via keyboard (see image on right).



So, all together, BBC News performed decently well. It’s main issues are a smattering of captionless videos and various html issues that could cause difficulty for users of assistive tech like screenreaders, while its highlights are accessible font and general keyboard accessiblity. To make the site more accessible, BBC could address the seemingly minor html issues that were flagged by accessibilitytest.org and ensure all videos are properly captioned or transcripted.